<template>
<div>
    <div class="center">
    <div class="item"></div>
    </div>
    <div class="start">
    <div class="item"></div>
    </div>
    <div class="end">
    <div class="item"></div>
    </div>
    </div>
</template>
<script>
export default{
    data(){
        return{};
    },
    methods:{},
};
</script>
    <style scoped>
        .center{
            display:flex;
            flex-direction:column;
            /*justify-content: center;*/
            align-items: center;
            height: 120px;
        }
        .start{
            display:flex;
            justify-content: flex-start;
        }
          .end{
            display: flex;
              justify-content: flex-end;
        }
        .item{
            background:red;
            height:100px;
            width:100px;
            border:1px solid #000;
        }
        
    </style>